<template>
    <div class="box">
        <HeadSearch></HeadSearch>
        <!--轮播-->
        <div class="header">
            <van-swipe :autoplay="3000" indicator-color="white">
                <van-swipe-item v-for="(item,index) in bannerItems" :key="index">
                    <router-link to="">
                        <img :src="item.img">
                    </router-link>
                </van-swipe-item>
            </van-swipe>
            <img src="../assets/images/index-bannerCover.png" class="cover-img">
        </div>
        <div class="index-nav">
            <router-link to="./tickets">
                <img src="../assets/images/index-tickets.png">
                <p>景点门票</p>
            </router-link>
            <router-link to="">
                <img src="../assets/images/index-specialty.png">
                <p>休闲娱乐</p>
            </router-link>
            <router-link to="">
                <img src="../assets/images/index-line.png">
                <p>精品线路</p>
            </router-link>
            <router-link to="./product">
                <img src="../assets/images/index-specialty.png">
                <p>文创特产</p>
            </router-link>
        </div>
        <div class="gray-box"></div>
        <div><router-link to="/spike"><img src="../assets/images/index-sale.png"></router-link></div>
        <div class="index-sale">
            <!--特卖-->
            <ul>
                <li v-for="(item,index) in saleItem" :key="index">
                    <router-link to="">
                        <div class="img-box">
                            <img :src="item.img">
                            <p>
                                <span class="tag-box">特卖商品</span>
                                <span>{{item.djs}}</span>
                            </p>
                        </div>
                        <div class="main-box">
                            <p class="only-1">{{item.name}}</p>
                            <div class="flex-box">
                                <p><span>¥<b>{{item.price}}</b></span>
                                    <del v-if="item.oldPrice!=''">¥{{item.oldPrice}}</del>
                                </p>
                                <button>马上抢</button>
                            </div>
                        </div>
                    </router-link>
                </li>
            </ul>
        </div>
        <div class="gray-box"> </div>
        <div class="recommend-box">
            <van-tabs v-model="activeName"  sticky>
                <van-tab v-for="(item , index) in recommendList" :key="index" :title="item.title">
                    <ul class="pa-20">
                        <li v-for="(i , key) in item.list" :key="key">
                            <router-link to="">
                                <div class="img-box">
                                    <img :src="i.img">
                                    <span>{{i.tag}}</span>
                                </div>
                                <div class="main-box">
                                    <p class="only-1">{{i.name}}</p>
                                    <div class="price-box">
                                        <p><span>¥<b>{{i.price}}</b></span>
                                            <del v-if="i.oldPrice!=''">¥{{i.oldPrice}}</del>
                                        </p>
                                    </div>
                                </div>
                            </router-link>
                        </li>
                    </ul>
                </van-tab>
            </van-tabs>
        </div>
        <!--此处设置日历控件中，没有数据的日期不可选择（设置selectableNoData为false） -->
        <Calendar ref="calendar" model="single" :selectableNoData="false" :selected="entity.playDate" @month-changed="onCalendarMonthChanged"  @confirm="onCalendarChanged">
        <!--<Calendar ref="calendar" model="single" :selectableNoData="false" :selected="entity.playDate" @month-changed="onCalendarMonthChanged" @confirm="onCalendarChanged">-->
            <template slot-scope="{data}">
                <i class="calendar-badge">售</i>{{data.price}}元
                <br/>
                <i class="calendar-badge">余</i>{{data.quantity-data.selledQuantity}}张
            </template>
        </Calendar>
        <button  @click="showCalendar">更多</button>
        <Navbar :nav="0"></Navbar>
    </div>
</template>

<script>
    import Navbar from '@/components/navbar/navbar';//导航
    import {Calendar} from "@/components/calendar";
    import moment from 'moment'
    import HeadSearch from '@/components/headSearch/headSearch';//头部搜索
    import bannerImg from '@/assets/temporary/index-baner.png';//banner图
    import saleImg from '@/assets/temporary/index-sale.png';//特卖图片
    import recommendImg1 from '../assets/temporary/recommendImg1.png';//推荐图片
    import recommendImg2 from '../assets/temporary/recommendImg2.png';//推荐图片
    function InitTime(endtime) {
        var hh, mm, ss = null;
        var time = parseInt(endtime) - new Date().getTime();
        if (time <= 0) {
            return '活动已结束'
        } else {
            hh = Math.floor((time / 60 / 60));
            mm = Math.floor((time / 60) % 60);
            ss = Math.floor(time % 60);
            var str = "距结束:" + ":" + hh + ":" + mm + ":" + ss;
            return str;
        }
    }

    export default {
        name: 'home',
        components: {
            Navbar, HeadSearch,Calendar
        },
        data() {
            return {
                //轮播
                bannerItems: [
                    {img: bannerImg,},
                    {img: bannerImg,},
                    {img: bannerImg,},
                ],
                // 特卖
                saleItem: '',
                //推荐
                recommendList:[
                    {
                        title:'推荐',
                        list:[
                            {img:recommendImg1,tag:'自然风光',name:'嵖岈山风景区成人票',price: '85', oldPrice: '90'},
                            {img:recommendImg2,tag:'恐龙之乡',name:'嵖岈山风景区成人票',price: '85', oldPrice: '90'},
                            {img:recommendImg1,tag:'自然风光',name:'嵖岈山风景区成人票',price: '85', oldPrice: '90'},
                            {img:recommendImg1,tag:'自然风光',name:'嵖岈山风景区成人票',price: '85', oldPrice: '90'},
                            {img:recommendImg1,tag:'自然风光',name:'嵖岈山风景区成人票',price: '85', oldPrice: '90'},
                            {img:recommendImg1,tag:'自然风光',name:'嵖岈山风景区成人票',price: '85', oldPrice: '90'},
                            {img:recommendImg1,tag:'自然风光',name:'嵖岈山风景区成人票',price: '85', oldPrice: '90'}
                        ]
                    },
                    {
                        title:'附近景点',
                        list:[
                            {img:recommendImg2,tag:'恐龙之乡',name:'嵖岈山风景区成人票',price: '85', oldPrice: '90'},
                            {img:recommendImg1,tag:'自然风光',name:'嵖岈山风景区成人票',price: '85', oldPrice: '90'},
                            {img:recommendImg1,tag:'自然风光',name:'嵖岈山风景区成人票',price: '85', oldPrice: '90'},
                            {img:recommendImg1,tag:'自然风光',name:'嵖岈山风景区成人票',price: '85', oldPrice: '90'},
                            {img:recommendImg1,tag:'自然风光',name:'嵖岈山风景区成人票',price: '85', oldPrice: '90'},
                            {img:recommendImg1,tag:'自然风光',name:'嵖岈山风景区成人票',price: '85', oldPrice: '90'},
                            {img:recommendImg1,tag:'自然风光',name:'嵖岈山风景区成人票',price: '85', oldPrice: '90'},
                            {img:recommendImg1,tag:'自然风光',name:'嵖岈山风景区成人票',price: '85', oldPrice: '90'}
                        ]
                    },
                    {
                        title:'遛娃',
                        list:[
                            {img:recommendImg2,tag:'恐龙之乡',name:'嵖岈山风景区成人票',price: '85', oldPrice: '90'},
                            {img:recommendImg1,tag:'自然风光',name:'嵖岈山风景区成人票',price: '85', oldPrice: '90'},
                            {img:recommendImg1,tag:'自然风光',name:'嵖岈山风景区成人票',price: '85', oldPrice: '90'},
                            {img:recommendImg2,tag:'恐龙之乡',name:'嵖岈山风景区成人票',price: '85', oldPrice: '90'},
                            {img:recommendImg1,tag:'自然风光',name:'嵖岈山风景区成人票',price: '85', oldPrice: '90'},
                            {img:recommendImg1,tag:'自然风光',name:'嵖岈山风景区成人票',price: '85', oldPrice: '90'},
                            {img:recommendImg1,tag:'自然风光',name:'嵖岈山风景区成人票',price: '85', oldPrice: '90'},
                            {img:recommendImg1,tag:'自然风光',name:'嵖岈山风景区成人票',price: '85', oldPrice: '90'},
                            {img:recommendImg1,tag:'自然风光',name:'嵖岈山风景区成人票',price: '85', oldPrice: '90'}
                        ]
                    },
                    {
                        title:'情侣约会',
                        list:[
                            {img:recommendImg2,tag:'恐龙之乡',name:'嵖岈山风景区成人票',price: '85', oldPrice: '90'},
                            {img:recommendImg2,tag:'恐龙之乡',name:'嵖岈山风景区成人票',price: '85', oldPrice: '90'},
                            {img:recommendImg1,tag:'自然风光',name:'嵖岈山风景区成人票',price: '85', oldPrice: '90'},
                            {img:recommendImg1,tag:'自然风光',name:'嵖岈山风景区成人票',price: '85', oldPrice: '90'},
                            {img:recommendImg1,tag:'自然风光',name:'嵖岈山风景区成人票',price: '85', oldPrice: '90'},
                            {img:recommendImg1,tag:'自然风光',name:'嵖岈山风景区成人票',price: '85', oldPrice: '90'},
                            {img:recommendImg1,tag:'自然风光',name:'嵖岈山风景区成人票',price: '85', oldPrice: '90'},
                            {img:recommendImg1,tag:'自然风光',name:'嵖岈山风景区成人票',price: '85', oldPrice: '90'},
                            {img:recommendImg1,tag:'自然风光',name:'嵖岈山风景区成人票',price: '85', oldPrice: '90'}
                        ]
                    }
                ],
                activeName:0,
                entity:[]
            }
        },
        methods:{
            showCalendar(){
                this.$refs.calendar.show()
            },
            onCalendarMonthChanged(){
            // onCalendarMonthChanged(year,month) {
                //日历月份变化时，加载该月数据
                // getTicketInventoryAndPrice(this.ticketId,moment([year,month]).format('YYYY-MM')).then(result=>{
                //     if(result.flag==0){
                //         this.$refs.calendar.setDatas(result.object)
                //     }else{
                //         this.$refs.calendar.setDatas([])
                //     }
                // })
            },
            onCalendarChanged(date) {
                this.playDate = moment(date).format("YYYY-MM-DD")
                //重新加载数据
                this.fetchData()
            },
        },
        created() {
            let saleAllItem = [
                {img: saleImg, time: "1585753270350", name: '新乡八里沟景区门票', price: '85', oldPrice: '90'},
                {img: saleImg, time: "1570041118162", name: '新乡八里沟景区门票', price: '85', oldPrice: ''}
            ]
            saleAllItem.map(obj => {
                this.$set(
                        obj, "djs", InitTime(obj.time)
                );
            })
            this.list = saleAllItem;
            this.saleItem = saleAllItem
        },
        mounted() {
            setInterval(() => {
                for (var key in this.list) {
                    var aaa = parseInt(this.list[key].time);
                    var bbb = new Date().getTime();
                    var rightTime = aaa - bbb;
                    if (rightTime > 0) {
                        var hh = Math.floor((rightTime / 1000 / 60 / 60));
                        var mm = (Math.floor((rightTime / 1000 / 60) % 60) < 10) ? '0' + Math.floor((rightTime / 1000 / 60) % 60) : Math.floor((rightTime / 1000 / 60) % 60);
                        var ss = (Math.floor((rightTime / 1000) % 60) < 10) ? "0" + Math.floor((rightTime / 1000) % 60) : Math.floor((rightTime / 1000) % 60);
                        this.list[key]["djs"] = "距结束:" + hh + ":" + mm + ":" + ss;
                    } else {
                        this.list[key]["djs"] = '活动已结束'
                    }

                }
            }, 1000);

        },
        //离开页面后清除定时器
        destroyed() {
            clearInterval()
        },
    }
</script>
<style lang="scss" scoped>
    @import "@/assets/css/public";

    .box {
        background-color: #fff;
        padding-bottom: vw(120);
    }

    .header {
        position: relative;
        width: 100%;
        background-color: #fff;
        .cover-img {
            position: absolute;
            bottom: -1px;
            left: 0;
            width: 100%;
        }
    }

    .index-nav {
        display: flex;
        justify-content: space-between;
        padding: vw(20) vw(80) vw(36);
        text-align: center;
        font-size: vw(24);

        img {
            width: vw(72);
            margin: vw(16) auto;
        }

    }

    .index-sale {
        padding: vw(24) 0;

        ul {
            white-space: nowrap;
            overflow-x: auto;

            li {
                display: inline-block;
                margin-left: vw(20);
                width: vw(580);
                a{

                    .img-box {
                        position: relative;
                        color: #fff;
                        font-size: vw(24);
                        line-height: vw(42);
                        border-radius: vw(10);
                        overflow: hidden;

                        p {
                            position: absolute;
                            left: 0;
                            top: 0;
                            height: vw(42);

                            span {
                                display: inline-block;
                                padding: 0 vw(14);
                                border-radius: vw(10);
                                background-color: rgba(255, 102, 0, .8);

                                &.tag-box {
                                    background-color: rgba(0, 0, 0, .4);
                                    margin-right: vw(10);
                                }
                            }
                        }
                    }

                    .main-box {
                        padding: 0 vw(10) vw(50);

                        .only-1 {
                            line-height: vw(80);
                        }

                        .flex-box {
                            justify-content: space-between;
                            align-items: center;

                            p {
                                span {
                                    margin-right: vw(10);
                                    color: $org_font;
                                    font-size: vw(28);

                                    b {
                                        font-size: vw(42);
                                    }
                                }

                                del {
                                    color: #999;
                                    font-size: vw(20);
                                }
                            }

                            button {
                                width: vw(120);
                                height: vw(48);
                                background: $orgGradientBg;
                                color: #fff;
                                font-size: vw(28);
                                border-radius: vw(24);
                            }
                        }
                    }
                }
            }
        }
    }
    .recommend-box{
        ul{
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            li {
                width: vw(345);
                margin: vw(10) 0;
                box-shadow:0px 0px vw(10) 0px rgba(0, 0, 0, 0.2);
                overflow: hidden;
                border-radius: vw(10);
                a{

                    .img-box{
                        position: relative;
                        span{
                            position: absolute;
                            left: 0;
                            top: 0;
                            height:vw(32);
                            padding: 0 vw(10);
                            background-color: rgba(0,0,0,.4);
                            font-size: vw(20);
                            color: #fff;
                            line-height: vw(32);
                            border-radius:vw(10) 0px vw(10) 0px;
                        }
                    }
                    .main-box {
                        padding: vw(20);
                        .only-1{
                            margin-top: vw(24);
                            color: #333;
                            font-size: vw(28);
                        }
                    }
                    .price-box{
                        p {
                            span {
                                margin-right: vw(10);
                                color: $org_font;
                                font-size: vw(28);

                                b {
                                    font-size: vw(42);
                                }
                            }

                            del {
                                color: #999;
                                font-size: vw(20);
                            }
                        }
                    }
                }
            }
        }
    }
</style>
